<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>19_条件&v-if条件渲染使用</title>
  <!-- 
  在 Vue 中， `v-if`  指令用于条件渲染，可以根据条件的真假来决定是否渲染某个元素或组件。以下是对  `v-if`  条件渲染的使用说明总结：
  1. 基本用法
  `v-if`  指令的基本语法如下：
  <template>
    <div>
      <p v-if="isVisible">这段文字只有在 isVisible 为 true 时才会显示。</p>
      <button @click="toggleVisibility">切换显示</button>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        isVisible: false,
      };
    },
    methods: {
      toggleVisibility() {
        this.isVisible = !this.isVisible;
      },
    },
  };
  </script>
  在这个例子中，当  `isVisible`  为  `true`  时，段落  `<p>`  会被渲染；当  `isVisible`  为  `false`  时，段落不会被渲染。

  2. v-else 和 v-else-if

  `v-if`  可以与  `v-else`  和  `v-else-if`  一起使用，以实现更复杂的条件渲染：
  <template>
    <div>
      <p v-if="status === 'loading'">加载中...</p>
      <p v-else-if="status === 'success'">加载成功！</p>
      <p v-else>加载失败，请重试。</p>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        status: 'loading',
      };
    },
  };
  </script>
  在这个例子中，根据  `status`  的值，渲染不同的段落。

  3. 性能考虑

  - 销毁与重建：使用  `v-if`  时，Vue 会在条件为  `false`  时销毁元素，并在条件为  `true`  时重新创建元素。这意味着  `v-if`  适用于条件变化较少的情况。
  - v-show：如果需要频繁切换显示状态，可以考虑使用  `v-show` ，它会通过 CSS 的  `display`  属性来控制元素的显示和隐藏，而不会销毁元素。

  4. 使用场景

  - 动态内容：在需要根据用户输入或其他条件动态显示内容时，使用  `v-if`  是非常有效的。
  - 权限控制：可以根据用户的权限状态来控制某些功能或内容的显示。

  5. 注意事项

  - 多个 v-if：在同一元素上只能有一个  `v-if` ，如果需要多个条件，可以使用  `v-else-if`  和  `v-else` 。
  - 条件表达式： `v-if`  后面的条件表达式可以是任何 JavaScript 表达式。

  总结

  -  `v-if`  指令：用于根据条件渲染元素或组件。
  - 与  `v-else`  和  `v-else-if`  结合使用：实现复杂的条件渲染逻辑。
  - 性能考虑： `v-if`  会销毁和重建元素，适合条件变化较少的场景。
  - 适用场景：动态内容显示、权限控制等。
  -->
</head>
<body>
  
  <div id="app">
    <h3>1. v-if-else</h3>
    <div v-if="Object.keys(info).length > 0">
      <p>姓名: {{info.name}}</p>
      <p>年龄: {{info.age}}</p>
    </div>
    <p v-else>暂无数据</p>

    <h3>2. v-else-if</h3>
    <h1 v-if="score > 90">优秀</h1>
    <h2 v-else-if="score > 80">良好</h2>
    <h3 v-else-if="score >= 60">及格</h3>
    <h4 v-else>不及格</h4>
  </div>
  <script src="../lib/vue.js"></script>
  <script>
    const { createApp, ref, reactive } = Vue
    createApp({
      setup() {
        const score = ref(45)
        const info = ref({})
        
        return {
          score,
          info
        }
      }
    }).mount('#app')

  </script>
  
</body>
</html>